<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="copyright" content="www.apicloud.com" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>歌单</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<style>
html,body {min-height: 100%;}
.fr {float: right;}
.fl {float: left;}
.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.ml5 {margin-left: 0.5em;}
.mr5 {margin-right: 0.5em;}
.mh07 {margin: 0 0.7em;}

.hdivider {width: 100%; height: 1px;background-color: #e0e0e0;}

.row {display: -webkit-box;display: -webkit-flex;}
.col {-webkit-box-flex:1; -webkit-flex:1; flex:1; position: relative;}

.swiper-container img {width: 100%;}

/* 歌单标题 */
.sectionTitle {height: 2em; line-height: 2em; font-size: 1.12em;}
.sectionTitle .titleDivider {display: inline-block; height: 1.12em; width: 3px; vertical-align: top; background-color: #D43C33; margin-top: 0.44em; margin-left: 0.7em; margin-right: 0.3em;}
/* 歌单 */
.col .listcoverbar {position: absolute; top: 0; background-color: rgba(0,0,0,0.4); width: 100%;height: 1.2em;}
.col .listcoverbar span {color: #fff;padding-right: 0.3em;}
.col .listcoverbar .earphone {width: 1em; margin-top: 0.2em; margin-right: 0.3em;}
.col .listcover {width: 100%;}
.col .listtitle {height: 2.4em; font-size: 1em; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;color: #383838;}

/* item样式 */
.egret-item {height: 4em;}
.egret-item .egret-item-box-cover-center {display: table; height: inherit;}
.egret-item .egret-item-box-cover-center .egret-item-box-abtc {display: table-cell; vertical-align: middle;}
.egret-item .egret-item-box-cover-center .egret-item-box-abtc img {width: 3em; vertical-align: top;}

.egret-item .egret-item-arrow {display: table; height: inherit;}
.egret-item .egret-item-arrow .egret-item-box-abtc {display: table-cell; vertical-align: middle;}
.egret-item .egret-item-arrow .egret-item-box-abtc img {width: 0.8em; vertical-align: top;}

.egret-item .egret-item-shelf {height: inherit; }
.egret-item .egret-item-shelf .egret-item-shelf-title {font-size: 1.1em; margin-top: 0.6em;}
.egret-item .egret-item-shelf .egret-item-shelf-subtitle {font-size: 0.6em; color: #666; margin-top: 0.6em;}

.egret-item .egret-item-shelf-single {height: inherit; line-height: 4em;font-size: 1.1em;}
</style>
</head>
<body>

<!-- 1 全部歌单 -->
<div class="sectionTitle"><div class="titleDivider"></div><span>全部歌单</span></div>
<div class="row">
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">18692</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<img src="../../image/frame0101cover/frame0102cover01.jpg" alt="" class="listcover">
		<div class="listtitle">没想到过你会离开，我会难过，会如此难堪。</div>
	</div>
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">4954</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<img src="../../image/frame0101cover/frame0102cover02.jpg" alt="" class="listcover">
		<div class="listtitle">第56届日本唱片大赏</div>
	</div>
</div>
<div class="row	mt20">
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">6013</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<div>
		<img src="../../image/frame0101cover/frame0102cover03.jpg" alt="" class="listcover">
		<div class="shadow"></div>
			
		</div>
		<div class="listtitle">想念叮咛也有声音</div>
	</div>
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">2308</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<img src="../../image/frame0101cover/frame0102cover04.jpg" alt="" class="listcover">
		<div class="listtitle">严云农：静若处子动若脱兔</div>
	</div>
</div>
<div class="row	mt20">
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">6013</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<div>
		<img src="../../image/frame0101cover/frame0102cover05.jpg" alt="" class="listcover">
		<div class="shadow"></div>
			
		</div>
		<div class="listtitle">陌路</div>
	</div>
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">2308</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<img src="../../image/frame0101cover/frame0102cover06.jpg" alt="" class="listcover">
		<div class="listtitle">【Billboard】2014年终专辑榜TOP10精选</div>
	</div>
</div>
<div class="row	mt20">
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">6013</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<div>
		<img src="../../image/frame0101cover/frame0102cover07.jpg" alt="" class="listcover">
		<div class="shadow"></div>
			
		</div>
		<div class="listtitle">想念叮咛也有声音</div>
	</div>
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">2308</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<img src="../../image/frame0101cover/frame0102cover08.jpg" alt="" class="listcover">
		<div class="listtitle">他们来自马来西亚。</div>
	</div>
</div>
<div class="row	mt20">
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">6013</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<div>
		<img src="../../image/frame0101cover/frame0102cover09.jpg" alt="" class="listcover">
		<div class="shadow"></div>
			
		</div>
		<div class="listtitle">致我们终将失去的爱情</div>
	</div>
	<div class="col mh07"  onclick="openMusicList()">
		<div class="listcoverbar"><span class="fr">2308</span><img src="../../image/cm2_list_detail_icn_music_sm.png" alt="" class="earphone fr"></div>
		<img src="../../image/frame0101cover/frame0102cover10.jpg" alt="" class="listcover">
		<div class="listtitle">那些只听前奏就中毒的英文歌</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
function openMusicList () {
	api.openWin({
		name: 'musiclist',
		url: '../musiclist.html',
		delay:200
	});
}

</script>
</html>